<template>
  <div>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="20" :offset="3">
            <el-card style="padding-bottom: 20px;width: 90%">
              <el-col :offset="2"><div>所在省份：</div></el-col>
              <el-col :span="24" :offset="3">
                <div>
                  <el-radio v-model="region" label="北京">北京</el-radio>
                  <el-radio v-model="region" label="天津">天津</el-radio>
                  <el-radio v-model="region" label="河北">河北</el-radio>
                  <el-radio v-model="region" label="山西">山西</el-radio>
                  <el-radio v-model="region" label="内蒙古">内蒙古</el-radio>
                  <el-radio v-model="region" label="辽宁">辽宁</el-radio>
                  <el-radio v-model="region" label="吉林">吉林</el-radio>
                </div>
                <div>
                  <el-radio v-model="region" label="黑龙江">黑龙江</el-radio>
                  <el-radio v-model="region" label="上海">上海</el-radio>
                  <el-radio v-model="region" label="江苏">江苏</el-radio>
                  <el-radio v-model="region" label="浙江">浙江</el-radio>
                  <el-radio v-model="region" label="安徽">安徽</el-radio>
                  <el-radio v-model="region" label="福建">福建</el-radio>
                  <el-radio v-model="region" label="江西">江西</el-radio>
                </div>
                <div>
                  <el-radio v-model="region" label="山东">山东</el-radio>
                  <el-radio v-model="region" label="河南">河南</el-radio>
                  <el-radio v-model="region" label="湖北">湖北</el-radio>
                  <el-radio v-model="region" label="湖南">湖南</el-radio>
                  <el-radio v-model="region" label="广东">广东</el-radio>
                  <el-radio v-model="region" label="广西">广西</el-radio>
                  <el-radio v-model="region" label="海南">海南</el-radio>
                </div>
                <div>
                  <el-radio v-model="region" label="重庆">重庆</el-radio>
                  <el-radio v-model="region" label="四川">四川</el-radio>
                  <el-radio v-model="region" label="贵州">贵州</el-radio>
                  <el-radio v-model="region" label="云南">云南</el-radio>
                  <el-radio v-model="region" label="西藏">西藏</el-radio>
                  <el-radio v-model="region" label="陕西">陕西</el-radio>
                  <el-radio v-model="region" label="甘肃">甘肃</el-radio>
                </div>
              </el-col>
              <el-col :span="24" class="wapperA"></el-col>
              <el-col :offset="2"><div style="margin-top: 20px">院校类型：</div></el-col>
              <el-col :span="24" :offset="3">
                <div>
                  <el-radio v-model="type" label="综合">综合</el-radio>
                  <el-radio v-model="type" label="工科">工科</el-radio>
                  <el-radio v-model="type" label="理科">理科</el-radio>
                  <el-radio v-model="type" label="文科">文科</el-radio>
                  <el-radio v-model="type" label="政法">政法</el-radio>
                  <el-radio v-model="type" label="医药">医药</el-radio>
                  <el-radio v-model="type" label="体育">体育</el-radio><br>
                  <el-radio v-model="type" label="农林">农林</el-radio>
                  <el-radio v-model="type" label="林业">林业</el-radio>
                  <el-radio v-model="type" label="师范">师范</el-radio>
                  <el-radio v-model="type" label="语言">语言</el-radio>
                  <el-radio v-model="type" label="财经">财经</el-radio>
                  <el-radio v-model="type" label="艺术">艺术</el-radio>
                  <el-radio v-model="type" label="民族">民族</el-radio>
                </div>
              </el-col>
              <el-col :span="24" :offset="2"><br>
                <el-button type="primary" @click="findByTags">通过标签查询</el-button>
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">院校查询结果</div>
            <div style="font-size: 1.2em; margin-left: 30px">共查询到 <span style="color: #00acee"> {{this.totals}} </span> 所院校</div>
            <el-card style="padding-bottom: 10px;width: 90%">
              <el-row v-for="college in colleges" :key="college.id" style="padding-bottom: 15px;padding-top: 15px;border-bottom: 1px solid grey">
                <el-col :span="5"><div><img :src="college.logo" class="viewspotimg" style="margin-left: 10px"></div></el-col>
                <el-col :span="8">
                  <div class="tabletexts">
                    <span v-text="college.name" class="tableName"></span>
                    <div style="margin-top: 15px">
                      <el-button round type="view" v-text="college.type" style="height: 25px;text-align-all: center;padding: 5px 10px 10px 10px;"></el-button>
                      <el-button round type="view" v-text="college.level" style="height: 25px;text-align-all: center;padding: 5px 10px 10px 10px;"></el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div>
                    <span v-text="college.region" class="tableProvince"></span>
                  </div>
                </el-col>
                <el-col :span="5" >
                  <el-button type="primary" icon="el-icon-search" @click="searchDetails(college.id)">查看详情</el-button>
                </el-col>
              </el-row>
              <div class="next">
                <!--大于1的时候可以点, 等于1的时候点了没效果-->
                <a href="javascript:;" v-if="page>1" class="page" @click="findAll(page-1)">&lt;上一页</a>
                <a href="javascript:;" v-if="page==1" class="page">&lt;上一页</a>
                <a href="javascript:;" v-for="indexpage in totalPage" v-text="indexpage" @click="findAll(indexpage)"
                   style="margin-right: 5px;margin-left: 5px" class="page"></a>
                <!--小于最后一页的时候可以点, 在最后一页的时候点了没效果-->
                <a href="javascript:;" v-if="page==totalPage" class="page">下一页&gt;</a>
                <a href="javascript:;" v-if="page<totalPage" class="page" @click="findAll(page+1)">下一页&gt;</a>
                <a class="page currentPage">当前为第<a class="page currentPage" v-text="page"></a>页</a>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";
    export default {
        name: "Universities",
        data(){
            return{
                colleges:[],
                page:1,
                rows:9,
                totalPage:0,
                totals:0,
                region:"",
                type:""
            }
        },
        components:{
            Header,
            Footer
        },
        methods:{
            findAll(indexpage){
                if(indexpage) this.page = indexpage;
                // if(this.type==="null") this.type=null;
                // if(this.region==="null") this.region=null;
                const _this = this;
                this.$axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                    console.log(res.data)
                    _this.colleges = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            findByTags(){
                const _this = this;
                console.log(this.type)
                console.log(this.region)
                console.log("page="+this.page+"&rows="+this.rows+"&type="+this.type+"&region="+this.region)
                this.$axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows+
                    "&type="+encodeURI(this.type)+"&region="+encodeURIComponent(this.region)).then((res)=>{
                    console.log(res.data)
                    console.log(location.href)
                    _this.colleges = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            },
            searchDetails(collegeId){
                this.$router.push({
                    path: '/university/'+collegeId
                });
            }
        },
        created(){
            this.findAll(1);
        }
    }
</script>

<style scoped>
  .el-main{
    margin-top: 70px;
  }

  .el-radio{
    width: 90px;
  }

  .wapperA{
    border-bottom: gray solid 1px;
    padding-bottom: 20px;
  }

  .yxtuijian{
    border-left: rgb(23, 100, 182) 5px solid;
    padding-left: 20px;
    font-size: 2em;
  }
  .viewspotimg{
    width: 100px;
  }
  .tableName{
    font-size: 1.8em;
    margin-right: 90px;
  }
  .tableProvince{
    color:rgb(121, 121, 121);
    /* margin-right: 400px; */
  }
  .tableTag{
    font-size: 0.8em;
    border-radius: 15px;
    border: rgb(181, 213, 255) solid 1px;
    padding: 3px;
    margin-top: -20px;
    background-color: rgb(214, 232, 255);
  }
  .next{
    text-align: center;
    margin-top: 20px;
  }
  .page{
    text-decoration: unset;
    color: #0c0c0c;
  }
  .currentPage{
    padding-left: 20px;
  }
  .currentPage{
    padding-left: 5px;
    padding-right: 5px;
  }
</style>
